/*
 * @Description: 
 * @Author: handongliang dongliang.han@12301.cn
 * @Date: 2023-07-14 09:02:49
 * @LastEditTime: 2023-09-07 10:16:09
 */
import React, { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import cloneDeep from 'lodash/cloneDeep';
import merge from 'lodash/merge';

const PictorialBar: React.FC<any> = (props) => {
  const [chartOption, setChartOption] = useState({});

  const defaultOption = {
    color: ['#e54035'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      },
    },
    xAxis: {
      data: [],
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: {
        color: '#e54035',
        fontSize: 12
      }
    },
    yAxis: {
      splitLine: { show: false },
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: { show: false }
    },
  };
  const defaultSeries = {
    name: 'hill',
    type: 'pictorialBar',
    barCategoryGap: '-130%',
    symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
    itemStyle: {
      opacity: 0.5
    },
    label: {
      show: true,
      position: "top",
      textStyle: {
        color: "rgba(0,171,255,1)",
        fontSize: 24
      }
    },
    emphasis: {
      itemStyle: {
        opacity: 1
      }
    },
    data: [],
    z: 10
  };
  const resolveData = () => {
    let series = [];
    let option: any = {};
    const defaultOptionCopy = cloneDeep(defaultOption);
    if (props.series && props.series instanceof Array) {
      series = props.series.map((item: any) => merge({}, defaultSeries, item));
      option = merge({}, defaultOptionCopy, props.option || {});
    }
    option.series = series;
    setChartOption(option);
  };

  const getOption = () => {
    return cloneDeep(chartOption);
  };

  useEffect(() => {
    resolveData();
  }, [props.loading]);
  return (
    <ReactECharts
      echarts={echarts}
      {...props}
      option={getOption()}
      notMerge={true}
    />
  );
};

export default PictorialBar;
